<template>
  <div id="app">
    <router-view></router-view>
    <!-- <div class="dom" ref="dom" ></div> -->
    <div
      class="Playback_controller"
      v-show="!$route.meta.Playback_controller_not_show"
    >
      <div class="like_this play_item">
        <svg
          t="1648282730083"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6187"
          width="200"
          height="200"
          @click="like"
        >
          <path
            d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
            fill=""
            p-id="6188"
            class="fingerCursor"
          ></path>
          <path
            d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
            :fill="return_like_color()"
            p-id="6189"
            class="fingerCursor"
          ></path>
          <!-- fill="#FF5F5F" -->
          <path
            d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
            fill="#FFFFFF"
            p-id="6190"
          ></path>
        </svg>
      </div>
      <div class="before_one play_item">
        <svg
          t="1648283012944"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8010"
          width="200"
          height="200"
          @click="before"
        >
          <path
            d="M664.64 177.12a96 96 0 0 1 50.56 14.4 85.92 85.92 0 0 1 41.92 73.12v459.52a85.92 85.92 0 0 1-41.92 73.12 96.8 96.8 0 0 1-94.88 3.84l-4-2.4L304 573.76a84.96 84.96 0 0 1 0-151.52L618.08 188.8l2.24-1.12a98.88 98.88 0 0 1 44.32-10.56z m0 576a38.4 38.4 0 0 0 20.16-5.76 28.64 28.64 0 0 0 14.4-23.84V264.64a28.64 28.64 0 0 0-14.4-24.64 39.2 39.2 0 0 0-36.48-2.24L334.88 471.68l-2.24 1.12a27.2 27.2 0 0 0 0 50.24l4 2.4 311.52 224a40.64 40.64 0 0 0 16.48 4.32z"
            p-id="8011"
            fill="#ffffff"
          ></path>
          <path
            d="M257.92 811.68m-25.6 0l-0.16 0q-25.6 0-25.6-25.6l0-583.36q0-25.6 25.6-25.6l0.16 0q25.6 0 25.6 25.6l0 583.36q0 25.6-25.6 25.6Z"
            p-id="8012"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
      <div class="after_one play_item">
        <svg
          t="1648283042905"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="8253"
          width="200"
          height="200"
          @click="after"
        >
          <path
            d="M296.64 808.96a96 96 0 0 1-50.56-14.4 85.92 85.92 0 0 1-41.92-73.12V261.92a85.92 85.92 0 0 1 41.92-73.12 96.8 96.8 0 0 1 94.88-3.84l4 2.4 311.84 224.8a84.96 84.96 0 0 1 0 151.52l-313.6 233.6-2.24 1.12a98.88 98.88 0 0 1-44.32 10.56z m0-576a38.4 38.4 0 0 0-20.16 5.76 28.64 28.64 0 0 0-14.4 23.84v458.88a28.64 28.64 0 0 0 14.4 23.84 39.2 39.2 0 0 0 36.48 2.24l313.44-233.12 2.24-1.12a27.2 27.2 0 0 0 0-50.24l-4.64-2.56-311.52-224a40.64 40.64 0 0 0-15.68-4.16z"
            p-id="8254"
            class="fingerCursor"
            fill="#ffffff"
          ></path>
          <path
            d="M703.36 174.4m25.6 0l0.16 0q25.6 0 25.6 25.6l0 583.36q0 25.6-25.6 25.6l-0.16 0q-25.6 0-25.6-25.6l0-583.36q0-25.6 25.6-25.6Z"
            p-id="8255"
            class="fingerCursor"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
      <div class="play_mode play_item">
        <!-- 顺序播放 -->
        <svg
          t="1648283105848"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9130"
          width="200"
          height="200"
          @click.stop="mode(play_mode)"
          v-if="play_mode === '0'"
        >
          <path
            d="M956.915826 484.47273l-105.340577 106.496578c-8.706131 8.344881-22.758767 8.344881-31.392648 0l-104.690327-106.496578c-12.354759-14.594511-4.082128-19.760389 4.551753-28.213646h95.911946c-26.515769-143.59698-152.194736-252.47781-303.522473-252.47781-117.081211 0-218.84541 65.025048-271.262823 160.936993l-52.309039-20.91639c60.94292-116.539335 182.828759-196.158894 323.571862-196.158894 182.467509 0 333.144994 133.879348 360.202639 308.616101h79.800184c8.597756 8.453256 13.113385 19.83264 4.479503 28.213646z m-751.1838-22.614267l105.340577 106.388203c8.706131 8.453256 4.190503 19.83264-4.551753 28.285896H215.341283c36.666902 129.43597 155.698864 224.372539 297.056092 224.372539 107.544204 0 202.191773-54.98229 257.463064-138.358851l52.850914 21.097015c-64.302547 103.895576-179.071756 173.400127-310.313978 173.400127-172.605376 0-316.527482-119.826713-354.531009-280.51083H74.164679c-8.633881-8.453256-16.906512-13.691385-4.443378-28.285896l104.618077-106.388203c8.633881-8.453256 22.686517-8.453256 31.392648 0z"
            fill="#ffffff"
            p-id="9131"
            class="fingerCursor"
          ></path>
        </svg>
        <!-- 单曲循环 -->
        <svg
          t="1648831990577"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1073"
          width="200"
          height="200"
          @click.stop="mode(play_mode)"
          v-if="play_mode === '1'"
        >
          <path
            d="M773.597867 203.776l-0.273067 0.443733a33.621333 33.621333 0 0 0-20.343467-6.485333c-18.978133 0.785067-33.723733 16.725333-32.9728 35.771733a33.826133 33.826133 0 0 0 15.633067 26.794667l-0.1024 0.170667a375.227733 375.227733 0 0 1 166.2976 311.876266c0 207.018667-168.448 375.466667-375.466667 375.466667-27.818667 0-27.818667 0-54.340266-2.901333-90.453333-9.898667-152.610133-58.9824-155.5456-61.201067a375.330133 375.330133 0 0 1-165.5808-311.364267c0-201.4208 159.5392-365.841067 358.843733-374.647466l-41.984 40.823466 0.8192 0.853334a33.860267 33.860267 0 0 0-15.2576 29.218133c0.750933 18.978133 16.725333 33.757867 35.669333 33.041067a33.792 33.792 0 0 0 26.0096-14.472534l0.3072 0.341334 128.648534-124.996267L515.6864 34.0992l-0.4096 0.4096a33.6896 33.6896 0 0 0-26.3168-11.400533c-18.944 0.750933-33.6896 16.725333-32.9728 35.703466a33.8944 33.8944 0 0 0 13.038933 25.156267l45.226667 45.2608C275.182933 135.714133 82.602667 331.741867 82.602667 572.347733c0 147.626667 73.1136 285.149867 193.194666 366.114134 3.072 2.56 77.550933 62.190933 188.757334 74.308266 29.422933 3.208533 31.1296 3.310933 61.781333 3.310934 244.667733 0 443.733333-199.0656 443.733333-443.733334A443.392 443.392 0 0 0 773.597867 203.776"
            p-id="1074"
            fill="#ffffff"
          ></path>
          <path
            d="M542.071467 400.827733a33.28 33.28 0 0 0-17.134934 6.075734l-0.170666-0.3072-106.8032 69.700266 0.170666 0.273067a33.9968 33.9968 0 0 0-15.837866 29.696c0.750933 18.944 16.725333 33.723733 35.669333 32.9728a33.109333 33.109333 0 0 0 17.1008-6.0416l0.2048 0.273067 53.998933-35.259734v249.856h0.034134c0 0.477867-0.238933 0.887467-0.2048 1.365334a34.2016 34.2016 0 1 0 68.4032-1.365334h0.034133v-0.170666c0-0.4096 0.2048-0.750933 0.2048-1.160534 0-0.273067-0.170667-0.477867-0.2048-0.785066V435.2c0-0.477867 0.2048-0.887467 0.2048-1.3312a34.4064 34.4064 0 0 0-35.669333-33.041067"
            p-id="1075"
            fill="#ffffff"
          ></path>
        </svg>
        <!-- 随机 -->
        <svg
          t="1648832140922"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1870"
          width="200"
          height="200"
          @click.stop="mode(play_mode)"
          v-if="play_mode === '2'"
        >
          <path
            d="M622.917818 601.367273l4.282182 2.56 3.677091 3.072 181.294545 181.341091v-100.491637c0-11.031273 6.190545-20.852364 15.639273-25.832727l4.189091-1.861818 4.654545-1.163637 4.840728-0.465454a29.323636 29.323636 0 0 1 27.694545 19.874909l1.163637 4.654545 0.465454 4.794182v166.912a32.488727 32.488727 0 0 1-1.070545 8.378182 28.578909 28.578909 0 0 1-13.591273 19.968l-2.839273 1.489455a32.256 32.256 0 0 1-7.168 3.025454l-4.049454 0.930909-5.585455 0.465455h-164.119273a29.323636 29.323636 0 0 1-9.402181-57.018182l4.561454-1.163636 4.840727-0.465455h100.072728l-182.504728-182.458182a28.858182 28.858182 0 0 1-7.121454-28.951272l1.675636-4.235637 2.327273-4.049454 3.118545-3.677091a28.951273 28.951273 0 0 1 32.954182-5.632z m213.643637-466.385455c6.050909 0 11.869091 1.582545 16.756363 4.375273a30.906182 30.906182 0 0 1 8.378182 5.957818c4.235636 4.189091 6.981818 9.588364 7.959273 15.034182l0.837818 4.375273 0.279273 4.514909v166.912a29.323636 29.323636 0 0 1-58.274909 4.328727l-0.325819-4.328727v-100.538182L207.639273 840.238545a28.858182 28.858182 0 0 1-28.951273 7.168l-4.235636-1.675636-4.049455-2.327273-3.677091-3.118545a28.858182 28.858182 0 0 1-5.445818-33.186909l2.327273-4.049455 3.118545-3.677091L772.514909 193.536l-100.072727 0.046545a29.323636 29.323636 0 0 1-27.927273-20.386909l-1.070545-4.561454-0.325819-4.328727a29.323636 29.323636 0 0 1 24.948364-28.997819l4.328727-0.325818h164.165819zM199.68 178.129455l4.282182 2.56 3.677091 3.072 192.372363 192.372363a28.904727 28.904727 0 0 1-33.186909 46.359273l-4.049454-2.327273-3.677091-3.118545-192.372364-192.372364a28.904727 28.904727 0 0 1 32.954182-46.545454z"
            fill="#ffffff"
            p-id="1871"
          ></path>
        </svg>
      </div>
      <div class="play_pause">
        <!-- 播放 -->
        <svg
          v-show="play_state"
          t="1648137595142"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5184"
          width="200"
          height="200"
          @click="pause"
        >
          <path
            d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m106.666667 682.666666a21.333333 21.333333 0 0 1-21.333334-21.333333V320a21.333333 21.333333 0 0 1 42.666667 0v384a21.333333 21.333333 0 0 1-21.333333 21.333333z m-213.333334 0a21.333333 21.333333 0 0 1-21.333333-21.333333V320a21.333333 21.333333 0 0 1 42.666667 0v384a21.333333 21.333333 0 0 1-21.333334 21.333333z"
            fill="#ff5506"
            p-id="5185"
            class="fingerCursor"
          ></path>
        </svg>
        <!-- 暂停 -->
        <svg
          v-show="!play_state"
          t="1648137535637"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4226"
          width="200"
          height="200"
          @click="play"
        >
          <path
            d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z"
            fill="#ff5506"
            p-id="4227"
            class="fingerCursor"
          ></path>
        </svg>
      </div>
      <a-progress
        :width="150"
        :format="() => ''"
        type="dashboard"
        :stroke-color="{
          '0%': '#108ee9',
          '100%': '#87d068',
        }"
        :strokeWidth="2"
        :percent="My_percent"
        :gapDegree="50"
      ></a-progress>
      <audio
        v-show="false"
        ref="audio"
        :src="PlaySongUrl"
        controls="controls"
        autoplay="autoplay"
        :loop="false"
        @timeupdate="onTimeupdate"
        @durationchange="onDurationchange"
        @ended="songEnd"
      ></audio>
    </div>
    <!-- 弹出歌单 -->
    <transition name="slide">
      <div class="outside" v-show="drawer" @click.stop="change_drawer">
        <div class="inside" @click.stop>
          <h2>
            播放队列
            <span>正在播放</span>
            <i class="el-icon-delete" @click="clear"></i>
          </h2>
          <ul class="song-list" v-if="playing_list">
            <song-item
              v-for="(item, index) in playing_list"
              :key="index"
              class="song-item"
              :index="index"
              :song="item"
            ></song-item>
          </ul>
          <el-empty v-else :image-size="200" description="暂无歌曲"></el-empty>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import axios from "axios";
import store from "./store";
import { localStorage } from "./request";
import songItem from "../renderer/components/songItem/index.vue";

export default {
  name: "music-app",
  data() {
    return {
      PlaySongUrl: "",
      currentTime: 0,
      duration: 0,
      Favorite_Songs: null,
    };
  },
  components: {
    songItem,
  },
  computed: {
    My_percent: function () {
      let percent = (this.currentTime / this.duration) * 100;
      return percent;
    },
    song: function () {
      return store.state.Counter.song;
    },
    play_state: function () {
      return store.state.Counter.play_state;
    },
    drawer: function () {
      return store.state.Counter.drawer;
    },
    volume: function () {
      return store.state.Counter.volume;
    },
    reload_DB: function () {
      return store.state.Counter.reload_DB;
    },
    playing_list: function () {
      return store.state.Counter.playing_list;
    },
    playing_list_insert() {
      return store.state.Counter.playing_list_insert;
    },
    play_mode: function () {
      return store.state.Counter.play_mode;
    },
    currentEmail: function () {
      return store.state.Counter.currentEmail;
    },
  },
  watch: {
    reload_DB: function (after, before) {
      if (after) {
        localStorage.getItem("email:" + this.currentEmail).then((res) => {
          // this.Favorite_Songs = res.data.Favorite_Songs;
          console.log(res);
          store.commit("need_reload_DB", false);
        });
      }
    },
    My_percent: function (after, before) {
      store.commit("save_My_percent", after);
    },
    song: function (after, before) {
      // console.log(after, before);
      axios
        .get(`https://apis.netstart.cn/music/song/url?id=${after.id}`)
        .then((res) => {
          // console.log(res.data);
          this.PlaySongUrl = res.data.data[0].url;
        })
        .catch((error) => {
          console.log(error);
        });

      localStorage.getItem("email:" + this.currentEmail).then((res) => {
        let data = res.data.Historical_Songs_List;
        data.push(after);
        localStorage
          .setItem("email:" + this.currentEmail, {
            ...res,
            data: {
              ...res.data,
              Historical_Songs_List: data,
            },
          })
          .then(() => {
            store.commit("need_reload_DB", true);
          });
      });
    },
    play_state: function (after, before) {
      if (after) {
        this.$refs.audio.play();
      } else {
        this.$refs.audio.pause();
      }
    },
    volume: function (after, before) {
      this.$refs.audio.volume = after;
    },
    playing_list: function (after, before) {
      if (!this.playing_list_insert) {
        store.commit("change_song", after[0]);
      } else {
        store.commit("change_playing_list_insert", false);
      }
    },
  },
  methods: {
    change_drawer() {
      store.commit("change_drawer", false);
    },
    play() {
      // 点击播放触发
      console.log("play");
      store.commit("change_play_state", true);
      this.$refs.audio.play();
    },
    pause() {
      // 点击暂停触发
      console.log("pause");
      store.commit("change_play_state", false);
      this.$refs.audio.pause();

      if (this.duration === this.currentTime) {
        // setTimeout(() => {
        //   // 手动触发下一首
        //   // coding here
        //   // this.$refs.audio.play();
        // }, 2000);
        console.log("歌曲放完啦");
      }
    },
    onTimeupdate: function (event) {
      // 播放进度时间改变触发
      this.currentTime = event.target.currentTime;
      store.commit("save_currentTime", event.target.currentTime);
    },
    onDurationchange: function (event) {
      // duration属性改变触发
      this.duration = event.target.duration;
      store.commit("save_duration", event.target.duration);
    },
    // 收藏
    like() {
      console.log("liiiiike", "app");
      // 收藏歌曲
      localStorage.getItem("email:" + this.currentEmail).then((res) => {
        // console.log(res.data.Favorite_Songs);
        let data = res.data.Favorite_Songs;
        let index = data.findIndex((item) => {
          return this.song.id === item.id;
        });
        if (index === -1) {
          data.push(this.song);
          this.Favorite_Songs = data;
          localStorage
            .setItem("email:" + this.currentEmail, {
              ...res,
              data: {
                ...res.data,
                Favorite_Songs: data,
              },
            })
            .then(() => {
              store.commit("need_reload_DB", true);
            });
        } else {
          data.splice(index, 1);
          this.Favorite_Songs = data;
          localStorage
            .setItem("email:" + this.currentEmail, {
              ...res,
              data: {
                ...res.data,
                Favorite_Songs: data,
              },
            })
            .then(() => {
              store.commit("need_reload_DB", true);
            });
        }
      });
    },
    songEnd() {
      console.log("songEnd");
      let timer = setTimeout(() => {
        this.after();
        clearTimeout(timer);
        timer = null;
      }, 2000);
    },
    // 上一首
    before() {
      store.commit("Switch_song", 3);
    },
    // 下一首
    after() {
      store.commit("Switch_song", 4);
    },
    mode(play_mode) {
      switch (play_mode) {
        case "0":
          console.log(play_mode);
          store.commit("upload_play_mode", "1");
          break;
        case "1":
          console.log(play_mode);
          store.commit("upload_play_mode", "2");
          break;
        case "2":
          console.log(play_mode);
          store.commit("upload_play_mode", "0");
          break;
      }
    },
    return_like_color() {
      if (this.Favorite_Songs) {
        let index = this.Favorite_Songs.findIndex((item) => {
          return item.id === this.song.id;
        });
        return index !== -1 ? "#ff0000" : "#ffffff";
      } else {
        return "#ffffff";
      }
    },
    clear() {
      store.commit("clear_playing_list");
      store.commit("change_playing_list_insert", true);
    },
  },
  created() {
    store.commit("need_reload_DB", false);
  },
  mounted() {
    store.commit("need_reload_DB", false);
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  user-select: none;
}
body {
  height: 100vh;
}
#app {
  background-color: transparent;
  height: 100%;
  position: relative;

  .Playback_controller {
    width: 150px;
    height: 150px;
    background-color: rgba(255, 84, 4, 0.4);
    border-radius: 50%;
    position: absolute;
    bottom: 52px;
    left: 5vh;
    box-shadow: 0 0 0 0 black;
    z-index: 1000;
    transition: 0.4s;
    opacity: 0.4;

    &:hover {
      opacity: 1;

      .like_this {
        svg {
          transform: rotate(0deg);
        }
        opacity: 1;
      }
      .before_one {
        svg {
          transform: rotate(-50deg);
        }
        opacity: 1;
      }
      .after_one {
        svg {
          transform: rotate(-125deg);
        }
        opacity: 1;
      }
      .play_mode {
        svg {
          transform: rotate(-180deg);
        }
        opacity: 1;
      }
    }

    .play_item {
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: right center;
      // background-color: antiquewhite;
      width: 70px;
      height: 35px;
      transition: 1s;
      z-index: 100;

      svg {
        height: 35px;
        width: 35px;
        transform: translateX(150%);
        transition: 0.4s;
      }
    }
    .like_this {
      transform: translate(-100%, -50%) rotate(0deg);
      svg {
        // transform: rotate(-45deg);
      }
    }
    .before_one {
      transform: translate(-100%, -50%) rotate(55deg);
      svg {
        // transform: rotate(-90deg);
      }
    }
    .after_one {
      transform: translate(-100%, -50%) rotate(125deg);
      svg {
        // transform: rotate(-135deg);
      }
    }
    .play_mode {
      transform: translate(-100%, -50%) rotate(180deg);
      svg {
        // transform: rotate(-180deg);
      }
    }

    .play_pause {
      width: 60px;
      height: 60px;
      background-color: #ffffff;
      position: absolute;
      z-index: 100;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      border-radius: 50%;
      justify-content: center;
      align-items: center;

      svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  .outside {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2000;
    color: #ffffff;

    background-color: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;

    .inside {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(255, 255, 255, 0.7);
      padding: 10px;
      border-radius: 10px;
      height: 400px;
      width: 300px;

      h2 {
        span {
          font-size: 13px;
          color: #3e3e3e;
        }
      }

      .song-list {
        height: 90%;
        overflow-y: auto;

        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 1px;
        }

        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          // background-color: #f90;
          // background-image: -webkit-linear-gradient(
          //     45deg,
          //     rgba(255, 255, 255, 0.2) 25%,
          //     transparent 25%,
          //     transparent 50%,
          //     rgba(255, 255, 255, 0.2) 50%,
          //     rgba(255, 255, 255, 0.2) 75%,
          //     transparent 75%,
          //     transparent
          // );
        }

        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 10px;
          // background: #ededed;
        }

        .song-item {
          .control {
            display: none;
          }
        }
      }
    }
  }
}

// 动画
// slide
.slide-enter,
.slide-leave-to {
  opacity: 0;
}
.slide-enter-active,
.slide-leave-active {
  transition: 0.2s;
}
.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
